import React from 'react';
import { HasPermission } from './ability';
import { ColorNames } from '@src/types';
interface Props {
  permission?: string | string[];
  text: string;
  onClick?: () => void;
  className?: string;
  red?: boolean;
  color?: ColorNames;
}
export default function TextButton({ className, red, color, permission, text, onClick }: Props) {
  let cls = 'word-nowrap cursor-pointer mr-10';
  if (red) {
    cls += ' text-red-color';
  } else if (color) {
    cls += ` text-${color}-color`;
  } else {
    cls += ' text-primary-color';
  }
  cls += ' ' + (className ?? '');
  let child = (
    <div className={cls} onClick={onClick}>
      {text}
    </div>
  );

  if (!permission) {
    return child;
  }
  return <HasPermission permission={permission}>{child}</HasPermission>;
}
